<template>
  <div>
    <el-row class="content" :gutter="40">
      <!-- 时间线 -->
      <el-col :span="9">
        <div style="height: 280px">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :timestamp="activity.timestamp"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
        <div>
          <el-button
            style="width: 180px; height: 180px; text-align: center"
            :type="btn.type"
            :disabled="state"
            @click="modifyStart"
          >{{ btn.str }}</el-button>
        </div>
      </el-col>
      <!-- 内容区域 -->
      <el-col :span="14">
        <div>
          <el-row class="content" :gutter="10">
            <el-col
              :span="7"
            ><div><i class="el-icon-info" />报修单号:</div></el-col>
            <el-col
              :span="17"
            ><div>{{ order._id }}</div></el-col>
          </el-row>

          <el-row class="content" :gutter="10">
            <el-col
              :span="7"
            ><div><i class="el-icon-user-solid" />报修业主:</div></el-col>
            <el-col
              :span="17"
            ><div>{{ order.user.username }}</div></el-col>
          </el-row>
          <el-row class="content" :gutter="10">
            <el-col
              :span="7"
            ><div><i class="el-icon-s-home" />业主房屋:</div></el-col>
            <el-col
              :span="17"
            ><div>
              {{ order.house.building }}{{ order.house.room }}号
            </div></el-col>
          </el-row>
          <el-row class="content" :gutter="10">
            <el-col
              :span="7"
            ><div><i class="el-icon-phone-outline" />联系电话:</div></el-col>
            <el-col
              :span="17"
            ><div>{{ order.user.phone }}</div></el-col>
          </el-row>
          <el-row class="content" :gutter="10">
            <el-col
              :span="7"
            ><div><i class="el-icon-s-finance" />报修类型:</div></el-col>
            <el-col
              :span="17"
            ><div>{{ order.type.name }}</div></el-col>
          </el-row>
          <el-row class="content" :gutter="10">
            <el-col
              :span="7"
            ><div><i class="el-icon-s-release" />报修内容:</div></el-col>
            <el-col
              :span="17"
            ><div>{{ order.content }}</div></el-col>
          </el-row>

          <el-row class="content" :gutter="10">
            <el-col
              :span="7"
            ><div><i class="el-icon-timer" />预约时间:</div></el-col>
            <el-col
              :span="17"
            ><div>
              <el-date-picker
                v-model="order.time1"
                readonly
                type="datetime"
                placeholder="方便上门维修的时间"
                style="width: 100%"
              />
            </div></el-col>
          </el-row>

          <el-row class="content" :gutter="10">
            <el-col
              :span="7"
            ><div><i class="el-icon-s-open" />维修人员:</div></el-col>
            <el-col
              :span="17"
            ><div>{{ order.staff ? order.staff.name : "" }}</div></el-col>
          </el-row>
          <el-row class="content" :gutter="10">
            <el-col
              :span="7"
            ><div><i class="el-icon-s-claim" />处理状态:</div></el-col>
            <el-col
              :span="17"
            ><div
              :style="styleColor"
            >
              {{ order.state }}
            </div></el-col>
          </el-row>
          <el-row class="content" :gutter="10">
            <el-col
              :span="7"
            ><div><i class="el-icon-menu" />报修图片:</div></el-col>
            <el-col :span="17">
              <div>
                <el-image
                  v-for="(item, index) in order.images"
                  :key="index"
                  :src="src + item"
                  :style="order.images.length<=2?'width: 80px':'width: 60px'"
                  :z-index="2000"
                  :preview-src-list="srcList"
                />
                <img alt="">
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getFromTime } from './time'
import ordersApi from '../../../api/orders'
export default {
  props: { 'order': Object, 'src': String },

  data() {
    return {
      state: false
    }
  },

  computed: {
    srcList() {
      const data = this.order.images.map((item) => {
        return this.src + item
      })
      return data
    },

    activities() {
      const arr = [
        {
          content: '工单生成',
          timestamp: this.time(this.order.time - 0),
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
        }
      ]
      if (this.order.time2) {
        arr.push({
          content: '维修部接单',
          timestamp: this.time(this.order.time2 - 0),
          color: '#0bbd87'
        })
      }
      if (this.order.time3) {
        arr.push({
          content: '维修完工',
          timestamp: this.time(this.order.time3 - 0),
          color: '#0bbd87'
        })
      }
      return arr
    },
    styleColor() {
      if (this.order.state === '已完工') {
        return { color: '#999', fontWeight: 800 }
      } else if (this.order.state === '未完工') {
        return { color: '#000080', fontWeight: 800 }
      } else {
        return { color: '#FF0000', fontWeight: 800 }
      }
    },
    btn() {
      if (this.order.state === '已完工') {
        return {
          type: 'info',
          str: '已完工'
        }
      } else {
        if (!this.order.staff) {
          return {
            type: 'success',
            str: '确认接单'
          }
        } else {
          return {
            type: 'primary',
            str: '确认完工'
          }
        }
      }
    }
  },
  mounted() {
    console.log(this.order)
  },

  methods: {
    // 转换时间
    time(str) {
      return getFromTime(str)
    },

    async modifyStart() {
      if (this.btn.str === '确认接单') {
        const data = {}
        const _id = this.order._id
        data.staff = localStorage.getItem('userId')
        data.state = '未完工'
        data.time2 = new Date().getTime()
        await ordersApi.modifyStart(_id, data)
        await this.$store.dispatch('orders/getOrdersInfo', this.pages)
      } else {
        // 点击完工以后将按钮禁用
        const _id = this.order._id
        const data = {}
        data.time3 = new Date().getTime()
        data.state = '已完工'
        await ordersApi.modifyStart(_id, data)
        await this.$store.dispatch('orders/getOrdersInfo', this.pages)
        this.state = true
      }
    }
  }
}
</script>

<style scoped>
.content {
  border-bottom: 0.5px solid #898;
  line-height: 300%;

}

i {
  margin-right: 5px;
}
</style>>

